<template>
	<view class="fui-goods-group" :class="diyitem.style.liststyle">
		<view class="fui-goods-item" v-for="(childitem, childid) in goodsList" :key="childid">
			<view class="image" :class="diyitem.params.showicon=='1'?diyitem.style.iconstyle:''" :data-text="diyitem.style.goodsicon"
			 :style="{'background-image':'url('+childitem.thumb+')'}" @click="app.goPage('/pages/shop/goods/info?goods_id='+childitem.gid)">
				<view v-if="diyitem.params.showicon=='2'">
					<view class="goodsicon" :style="{position:'relative',width:iconwidth+'px',height:iconheight+'px'}">
						<view v-if="diyitem.params.iconposition=='left top'">
							<image bindload="goodsicon" class="left top" mode="widthFix" :src="diyitem.params.goodsiconsrc" :style="{width:diyitem.style.iconzoom+'%', left:diyitem.style.iconpaddingleft+'rpx',top:diyitem.style.iconpaddingtop+'rpx'}"></image>
						</view>
						<view v-if="diyitem.params.iconposition=='right top'">
							<image bindload="goodsicon" class="right top" mode="widthFix" :src="diyitem.params.goodsiconsrc" :style="{width:diyitem.style.iconzoom+'%', right:diyitem.style.iconpaddingleft+'rpx',top:diyitem.style.iconpaddingtop+'rpx'}"></image>
						</view>
						<view v-if="diyitem.params.iconposition=='left bottom'">
							<image bindload="goodsicon" class="left bottom" mode="widthFix" :src="diyitem.params.goodsiconsrc" :style="{width:diyitem.style.iconzoom+'%',left:diyitem.style.iconpaddingleft+'rpx',bottom:diyitem.style.iconpaddingtop+'rpx'}"></image>
						</view>
						<view v-if="diyitem.params.iconposition=='right bottom'">
							<image bindload="goodsicon" class="right bottom" mode="widthFix" :src="diyitem.params.goodsiconsrc" :style="{width:diyitem.style.iconzoom+'%',right:diyitem.style.iconpaddingleft+'rpx',bottom:diyitem.style.iconpaddingtop+'rpx'}"></image>
						</view>
					</view>
				</view>
				<view v-if="diyitem.params.saleout!=-1&&childitem.total==0&&childitem.cansee<=0||diyitem.params.saleout!=-1&&childitem.total==0&&childitem.cansee>0&&childitem.seecommission<=0">
					<image class="salez" :src="diyitem.params.saleout==0?'/static/shop/diyPage/images/saleout-2.png':diyitem.params.saleout"></image>
				</view>
				<view v-if="childitem.cansee>0&&childitem.seecommission>0">
					<view class="goods-Commission">{{childitem.seetitle}}￥{{childitem.seecommission}}</view>
				</view>
			</view>
			<view class="detail">
				<view v-if="diyitem.params.showtitle=='1'">
					<view class="name" :style="{color:diyitem.style.titlecolor}" @click="">
						<view v-if="childitem.bargain>0">
							<image class="bargain_label" src="/static/shop/diyPage/images/label.png"></image>
						</view>
						<view v-if="childitem.ctype==9">
							<text class="cycle-tip">周期购</text>
						</view>
						<text>{{childitem.title}} </text>
					</view>
				</view>
				<view v-if="diyitem.params.showprice=='1'&&(diyitem.params.showproductprice=='1'||diyitem.params.showsales=='1')">
					<view class="productprice">
						<view v-if="childitem.productprice>0&&diyitem.params.showproductprice=='1'">
							<text :style="{color:diyitem.style.productpricecolor,'margin-right':'16rpx'}">{{diyitem.params.productpricetext}}：<text
								 :class="diyitem.params.productpriceline=='1'?'line':''">￥{{childitem.productprice}}</text>
							</text>
						</view>
						<view v-if="diyitem.params.showsales=='1'">
							<text :style="{color:diyitem.style.salescolor}">{{diyitem.params.salestext}}：{{childitem.sales}}</text>
						</view>
					</view>
				</view>
				<view v-if="diyitem.params.showprice=='1'">
					<view class="price">
						<text class="text" :style="{color:diyitem.style.pricecolor}">￥{{childitem.price}}</text>
						<view v-if="childitem.ctype==9&&childitem.bargain==0">
							<view class="buy buybtnbtn buybtn-1" @click="">详情</view>
						</view>
						<view v-if="childitem.ctype==5&&childitem.bargain==0">
							<view class="buy buybtnbtn buybtn-1" @click="">详情</view>
						</view>
						<view v-if="childitem.bargain>0">
							<view class="buy buybtnbtn buybtn-1" @click="">砍价</view>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-1'&&childitem.ctype!=9&&(childitem.bargain==0||childitem.bargain==null)&&childitem.ctype!=5">
							<text class="buy buybtnbtn" :class="diyitem.style.buystyle" :style="{background:'none',color:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}" @click="toggleSpec(childitem)">购买</text>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-2'&&childitem.ctype!=9&&(childitem.bargain==0||childitem.bargain==null)&&childitem.ctype!=5">
							<text class="buy buybtnbtn" :class="diyitem.style.buystyle" :style="{background:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}" @click="toggleSpec(childitem)">购买</text>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-3'&&childitem.ctype!=9&&childitem.ctype!=5&&childitem.bargain==0">
							<text class="buy icon icon-cartfill buybtnbtn" :class="diyitem.style.buystyle" :style="{background:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}" @click="toggleSpec(childitem)"></text>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-4'&&childitem.ctype!=9&&childitem.ctype!=5&&childitem.bargain==0">
							<text class="buy icon icon-cart buybtnbtn " :class="diyitem.style.buystyle" :style="{background:'none',color:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}" @click="toggleSpec(childitem)"></text>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-5'&&childitem.ctype!=9&&childitem.ctype!=5&&childitem.bargain==0">
							<text class="buy icon icon-add buybtnbtn " :class="diyitem.style.buystyle" :style="{background:'none',color:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}" @click="toggleSpec(childitem)"></text>
						</view>
						<view v-if="diyitem.style.buystyle=='buybtn-6'&&childitem.ctype!=9&&childitem.ctype!=5&&childitem.bargain==0">
							<text class="buy icon icon-add buybtnbtn" :class="diyitem.style.buystyle" :style="{background:diyitem.style.buybtncolor,'border-color':diyitem.style.buybtncolor}"  @click="toggleSpec(childitem)"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<goodsSpec @selectSpec="selectSpec" @toggleSpec="toggleSpec" :specClass="specClass" :specSelected="specSelected"
		 :selectGoods="selectGoods" :selectGoodsPrice="selectGoodsPrice" :selectGoodSmarketPrice="selectGoodSmarketPrice"
		 :selectGoodsNumber="selectGoodsNumber" :selectGoodsImg="selectGoodsImg" :specList="specList" :specChildList="specChildList"
		 :selectSkuId="selectSkuId"></goodsSpec>
	</view>
</template>

<script>
	import goodsSpec from '@/pages/shop/goods/spec';
	export default {
		components: {
			goodsSpec
		},
		name: "tpl_goods_item",
		props: {
			diyitem: {
				type: Object,
				default: function() {
					return {};
				}
			},
			goodsList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			isswiper: {
				type: String,
				default: 'false',
			},
		},
		data() {
			return {
				cateMaskState: 0,
				specClass: 'none',
				specSelected: [],
				specList: [],
				specChildList: [],
				selectGoods: {}, //选择的商品
				selectGoodsId:0,
				selectSkuId:0,
				selectGoodsPrice: '0.00',
				selectGoodSmarketPrice: '0.00',
				selectGoodsNumber: 0,
				selectGoodsImg: '',
			};
		},
		watch: {},
		computed: {},
		methods: {
			
			//规格弹窗开关
			toggleSpec(selGoods) {
				if (this.isswiper == 'true'){
					this.app.goPage('/pages/shop/goods/info?goods_id='+selGoods.gid);
					return false;
				}
				if (this.specClass === 'show') {
					this.getCartNum = 1;
					this.loadCartNum();
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					if (this.selectGoodsId == selGoods.gid){
						this.specClass = 'show';
						this.showSelectSpec();
						return false;
					}
					this.selectGoodsId = selGoods.gid;
					this.getCartNum = 0;
					this.specSelected = [];
					
					this.$u.post('shop/api.goods/getGoodsInfo', {
						'goods_id': selGoods.gid
					}).then(res => {
						this.selectGoods = res.data;
						this.selectGoodsImg = this.config.baseUrl + res.data.goods_thumb;
						this.selectGoodsPrice = res.data.sale_price;
						this.selectGoodsNumber = res.data.goods_number;
						this.selectGoodSmarketPrice = res.data.market_price;
						this.specClass = 'show';
						this.specSelected = [];
						this.specList = [];
						this.specChildList = [];
						if (res.data.is_spec == 1){
							this.specList = res.data.specList;
							this.specChildList = res.data.specChildList;
							this.showSelectSpec();
						}
					})
				}
			},
			//选择规格
			selectSpec(list) {
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.showSelectSpec();
			},
			showSelectSpec() {
				let that = this;
				this.selectSkuId = 0;
				let selSkuArr = [];
				this.specSelected.forEach(item => {
					selSkuArr.push(item.id);
				})
				let selSku = selSkuArr.join(":");
				Object.keys(this.selectGoods.sub_goods).forEach(sku_id => {
					let item = this.selectGoods.sub_goods[sku_id];
					if (selSku == item.sku_val) {
						if (item.sale_price > 0){
							this.selectSkuId = parseInt(sku_id);
							this.selectGoodsPrice = item.sale_price;
							this.selectGoodSmarketPrice = item.market_price;
							this.selectGoodsNumber = item.goods_number;
						}
						return false;
					}
				})
				if (this.selectSkuId < 1){
					this.selectGoodsImg = this.config.baseUrl + this.selectGoods.goods_thumb;
					return false;
				}
				this.selectGoods.imgSkuList.forEach(item => {
					if (selSku == item.sku_val) {
						this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
						return false;
					}
				})
				if (this.selectGoodsImg == '') {
					this.selectGoods.imgSkuList.forEach(item => {
						let _sku = item.sku_val.split(':');
						if (selSkuArr[0] == _sku[0]) {
							this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
							return false;
						}
					})
				}
			},
			//加载购物车中商品数
			async loadCartNum() {
				
			},
			stopPrevent() {}
		}
	}
</script>

<style lang='scss'>
</style>
